<script setup>
// 组件生命周期函数
import { onMounted,onBeforeMount,onUpdated,onBeforeUpdate,onUnmounted,onBeforeUnmount,ref } from 'vue';
const msg = ref('hello')
const count = ref(10)
// 注册一个钩子，在组件被挂载之前被调用。
onBeforeMount(()=>{
    console.log('onBeforeMount');
    // const p1 = document.getElementById('p1')
    // console.log(p1);
    // console.log("msg=>",msg.value);
    
    
})
// 注册一个回调函数，在组件挂载完成后执行
onMounted(()=>{
    console.log('onMounted'); 
    // const p1 = document.getElementById('p1')
    // console.log("p1=>",p1);
    // console.log("onMounted msg=>",msg.value);
})

// 注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。
onBeforeUpdate(()=>{
    console.log('onBeforeUpdate'); 
})
// 注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。
onUpdated(()=>{
    console.log('onUpdated');  
})
// 注册一个钩子，在组件实例被卸载之前调用。
onBeforeUnmount(()=>{
    console.log('onBeforeUnmount');
    // 把一切耗时操作关闭：比如定时器、请求、 动画等
})
// 注册一个回调函数，在组件实例被卸载之后调用。
onUnmounted(()=>{
    console.log('onUnmounted');
    // 发通知：比如发送请求关闭 WebSocket 连接、 关闭动画等
})

</script>

<template>
<div>
    声明周期函数
    <p id="p1">我是p标签</p>
    <button @click="count++">{{ count }}</button>
</div>
</template>

<style scoped>
</style>